<div class="card mb-4">
    <h6 class="card-header">
        <span ng-bind="$ctrl.header"></span>
        <button class="btn btn-link text-primary btn-sm float-right py-0 collapsed" type="button" data-toggle="collapse" data-target="#{{$ctrl.header}}-tab" aria-controls="seo-tab-content" aria-expanded="false" aria-label="Toggle navigation"><i class="far fa-minus-square text-primary"></i> Collapse</button>
    </h6>
    <div id="{{$ctrl.header}}-tab" class="card-body collapse" ng-init="$ctrl.loadData()">
        <div class="row">
            <div class="col-12">
                <input type="text" class="form-control mb-4"
                    placeholder="Enter new Title then press enter to create new one" ng-model="$ctrl.newTitle"
                    ng-enter="$ctrl.createData()" />
            </div>
        </div>
        <div class="row">
            <div class="col-12" ng-repeat="item in $ctrl.selectedList">
                <checkbox-switch data="item.data.data" callback="$ctrl.select(data)" description="item.data.data[$ctrl.fieldDisplay]">
                </checkbox-switch>
            </div>
        </div>
        <div class="row">            
            <div class="col-12" ng-repeat="item in $ctrl.data.items| filter:$ctrl.newTitle" ng-hide="item.disabled">
                <checkbox-switch data="item" callback="$ctrl.select(data)" description="item[$ctrl.fieldDisplay]">
                </checkbox-switch>
            </div>
        </div>
        <hr>

        <paging class="small" page="$ctrl.data.page" page-size="$ctrl.data.pageSize" total="$ctrl.data.totalItems"
            ul-class="pagination justify-content-end m-0" a-class="page-link" paging-action="$ctrl.loadPosts(page-1)"
            scroll-top="true">
        </paging>
    </div>
</div>